import { SelectProps } from "antd"
import { FC, useEffect, useState } from "react"

import { IDxSysOperateLogEnums } from "@/api/dxn/type"
import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"

const OperatePageCode: FC<any> = ({ rules, selectorProps, labelProps }) => {
	const { generalGet } = useApi()
	const { newFormat } = useLocale()
	const [options, setOptions] = useState<SelectProps["options"]>([])

	useEffect(() => {
		;(async () => {
			const [err, data] = await generalGet<IDxSysOperateLogEnums[]>("/dx-game-data-manager/dxSysOperateLog/enums", undefined)
			if (err) {
				setOptions([])
				return
			}
			setOptions(
				data.filter(item => item.sectionCode === 2).map(item => ({ ...item, value: item.pageCode, label: item.pageName }))
			)
		})()
	}, [])

	return (
		<SFormItem colon name="operatePageCode" label={newFormat("common.action_page")} rules={rules} {...labelProps}>
			<StyleSelect placeholder={newFormat("common.select_all")} options={options} {...selectorProps} />
		</SFormItem>
	)
}

export default OperatePageCode
